<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :pagination="false"
  >
    <template slot="tags" slot-scope="tags">
      <a-tag v-for="tag in tags" :key="tag" color="blue">{{ tag }}</a-tag>
    </template>

    <template #actions="text, row">
      <div class="actions-container">
        <a href="javascript:;">编辑</a>
        <a href="javascript:;">删除</a>
      </div>
    </template>
  </a-table>
</template>
<script>
const columns = [
  {
    title: '规则名称',
    dataIndex: 'name',
  },
  {
    title: '规则描述',
    dataIndex: 'desc',
  },
  {
    title: '包含指标',
    dataIndex: 'tags',
    copedSlots: { customRender: 'tags' },
  },
  {
    title: '创建人',
    dataIndex: 'create_user',
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
  },
  {
    title: '操作',
    dataIndex: 'actions',
    scopedSlots: { customRender: 'actions' },
  },
]

const data = [
  {
    name: '规则名称1',
    desc: '规则描述1',
    tags: ['年龄'],
    create_user: 'Alice',
    create_time: '09/09/2021',
  },
   {
    name: '规则名称2',
    desc: '规则描述2',
    tags: ['年龄'],
    create_user: 'Alice',
    create_time: '09/09/2021',
  },
]

export default {
  data () {
    return {
      data,
      columns,
    }
  },
}
</script>

<style lang="scss" scoped>
.actions-container {
  & > a {
    margin: 0 $margin-base;
  }
}
</style>
